<template>
  <div style="width:100%;height:100vh;background:#f5f5f5;">
    <mt-header fixed title="充值" style="background:#fff;color:#000;">
      <router-link to="/" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
      <router-link to="/" slot="right" style="text-decoration:none">
        <span>完成</span>
      </router-link>
    </mt-header>
    <div style="width:100%;height:1rem;"></div>
    <div>
      <div class="trannext_title">
        <p>银行 支付宝转账</p>
      </div>
      <div class="transnext_img">
        <img src="@/assets/zhifu.png" alt>
        <img src="@/assets/zhifubao.png" alt>
      </div>
      <!-- <div class="trannext_title">
        <p>二：点击进入支付宝账户，完成转账</p>
      </div> -->
      <!-- <div class="transnext_user">
        <div class="transnext_user_img" style>
          <img src="@/assets/user.png" alt style="width:2rem;height:2rem;">
        </div>
        <div class="transnext_user_text">
          <p>
            支付宝账户：
            <span id="success_form_input">{{zhiname}}</span>
            <span
              ref="copy"
              data-clipboard-action="copy"
              data-clipboard-target="#success_form_input"
              @click="copyLink"
            >复制</span>
          </p>
          <p>陈嘉敏</p>
        </div>
      </div> -->
    </div>
    <a href="https://qr.alipay.com/tsx00624ocwkelyniwy1re1" style=" text-decoration: none;">
      <div class="ver_button">
        <button>去转账</button>
      </div>
    </a>

    <div class="transnext_bottom_text">
      <p>如不能正常打开，请按上面步骤手动转账</p>
      <p>完成后，请返回期货交易联系 <a href="https://op.chat.livechatvalue.com/chat/chatClient/chatbox.jsp?companyID=1178956&configID=94531&jid=5645645628&s=1" style="color:#1f96ff;text-decoration: none;">客服</a></p>
    </div>
    <!-- <div class="tran_text" style="margin-top:.5rem;">
      <span>到账时间</span>
    </div>
    <div class="tran_text" style>
      <span>08:45-24:00(30分钟内到账)</span>
    </div>
    <div class="tran_text" style>
      <span>24:00以后(次日09:00到账)</span>
    </div>
    <div class="tran_text" style>
      <span>如急需到账，请电话</span>
      <span style="color:#2bafff;">联系客服</span>
    </div> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      zhiname: "123123123.qq.com"
    };
  },
  mounted() {
    this.copyBtn = new this.clipboard(this.$refs.copy);
  },
  methods: {
    copyLink() {
      var that = this;
      let clipboard = that.copyBtn;
      clipboard.on("success", function() {
        that.$toast("复制成功！");
      });
      clipboard.on("error", function() {
        that.$toast("复制失败，请手动选择复制！");
      });
    }
  }
};
</script>
<style scoped>
.trannext_title {
  width: 100%;
  height: 1.5rem;
  font-size: 0.4rem;
  color: #666;
  letter-spacing: 1px;
  line-height: 1.5rem;
  padding: 0 0.5rem;
  box-sizing: border-box;
}
.transnext_img img {
  width: 100%;
}
.trannext_title span {
  color: #ff7500;
}
.transnext_user {
  width: 100%;
  height: 2.5rem;
  background: #fff;
  border-top: 1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.transnext_user_img {
  width: 30%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.transnext_user_text {
  width: 70%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  letter-spacing: 1px;
}
.transnext_user_text p {
  padding: 0.2rem 0;
}
.transnext_user_text p:last-child {
  color: #666;
}
.transnext_user_text > p > span:last-child {
  color: #1f96ff;
  margin-left: 0.4rem;
}
.ver_button {
  width: 100%;
  height: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.transnext_bottom_text {
  width: 100%;
  height: 1.5rem;
  padding: 0 0.5rem;
  box-sizing: border-box;
  font-size: 0.3rem;
  text-align: center;
  line-height: 0.7rem;
  letter-spacing: 1px;
}
.ver_button button {
  width: 80%;
  height: 1.2rem;
  background: #b3262c;
  color: #fff;
  font-size: 0.4rem;
  letter-spacing: 2px;
  border: none;
  border-radius: 8px;
}
.tran_text {
  width: 100%;
  height: 0.6rem;
  line-height: 0.8rem;
  text-align: center;
  letter-spacing: 1px;
  font-size: 0.35rem;
  color: #666;
}
</style>
